<template>
  <div class="categoryProduct">
    <div class="sort">
      <ul>
        <li :class="defaultColor?'active':''" @click="changeSort()">综合排序</li>
        <li @click="changeSort(1,listQuery.saleNum$sort)">
          销量
          <span>
            <i
              size="16px"
              class="el-icon-caret-top"
              :class="listQuery.saleNum$sort=='asc'?'active':''"
            ></i>
            <i
              size="16px"
              class="el-icon-caret-bottom"
              :class="listQuery.saleNum$sort=='desc'?'active':''"
            ></i>
          </span>
        </li>
        <li @click="changeSort(2,listQuery.createTime$sort)">
          时间
          <span>
            <i class="el-icon-caret-top" :class="listQuery.createTime$sort=='asc'?'active':''"></i>
            <i class="el-icon-caret-bottom" :class="listQuery.createTime$sort=='desc'?'active':''"></i>
          </span>
        </li>
        <li @click="changeSort(3,listQuery.price$sort)">
          价格
          <span>
            <i class="el-icon-caret-top" :class="listQuery.price$sort=='asc'?'active':''"></i>
            <i class="el-icon-caret-bottom" :class="listQuery.price$sort=='desc'?'active':''"></i>
          </span>
        </li>
      </ul>
    </div>
    <GoodList :list="list" @handleDetail="toDetail"></GoodList>
    <!-- <div class="productList">
      <ul>
        <li v-for="(item,index) in list" :key="index" @click="toDetail(item.gongyingId,item.id)">
          <div class="image" :style="{backgroundImage:`url(${item.image})`}"></div>
          <div class="good-title">{{item.name}}</div>
          <div class="price_warpper">
            <div class="price">
              {{item.priceText!=='面议'?'￥':''}}
              <span>{{item.priceText}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div> -->
    <Pagination
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      :total="total"
      @change="getProduct()"
    />
  </div>
</template>

<script>
import Pagination from "@/views/front/components/Pagination";
import { productPageByQo } from "@/api/front-home.js";
import GoodList from "@/views/front/shop/components/GoodList";
export default {
  components: { Pagination, GoodList},
  props: {
    categoryId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: [],
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        memberId: 0,
        createTime$sort: "",
        saleNum$sort: "",
        price$sort: "",
        categoryId: ""
      },
      total: 0,
      shopId: ""
    };
  },
  watch: {
    categoryId(val) {
      this.listQuery.categoryId = val;
      this.getProduct();
    }
  },
  computed: {
    defaultColor() {
      if (
        this.listQuery.createTime$sort == "" &&
        this.listQuery.saleNum$sort == "" &&
        this.listQuery.price$sort == ""
      ) {
        return true;
      } else {
        return false;
      }
    }
  },
  created() {
    this.shopId =
      this.$route.query && this.$route.query.id && Number(this.$route.query.id);
    if (this.$store.state.front.shopId !== this.shopId) {
      this.$store.commit("front/SET_SHOPID", this.shopId);
      this.$store.dispatch("front/getShopInfo", this.shopId);
    }
    this.listQuery.memberId = this.shopId;
    this.getProduct();
  },
  methods: {
    getProduct() {
      if (this.categoryId && !this.listQuery.categoryId) {
        this.listQuery.categoryId = this.categoryId;
      }
      productPageByQo(this.listQuery).then(res => {
        this.list = res.list || [];
        this.total = res.totalCount;
      });
    },
    changeSort(changeType, sort) {
      this.listQuery.price$sort = "";
      this.listQuery.saleNum$sort = "";
      this.listQuery.createTime$sort = "";
      switch (changeType) {
        case 1:
          this.listQuery.saleNum$sort = sort && sort === "asc" ? "desc" : "asc";
          break;
        case 2:
          this.listQuery.createTime$sort =
            sort && sort === "asc" ? "desc" : "asc";
          break;
        case 3:
          this.listQuery.price$sort = sort && sort === "asc" ? "desc" : "asc";
          break;

        default:
          break;
      }
      this.getProduct();
    },
    toDetail(goodItem) {
      this.$router.push({
        path: "/front-shop/productDetail",
        query: { id: goodItem.gongyingId, productId: goodItem.id }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
[class^="el-icon-"],
[class*=" el-icon-"] {
  line-height: 0.5;
}
.categoryProduct {
  .sort {
    margin-top: 20px;

    background: #f6f6f6;
    .active {
      color: #952824;
    }
    > ul {
      display: flex;
      align-items: center;
      padding: 5px 0;
      margin-bottom: 20px;
      li {
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        width: 108px;
        height: 31px;
        line-height: 31px;
        border: 1px solid #e6e6e6;
        > span {
          i {
            display: block;
            &.active {
              color: #952824;
            }
          }
        }
      }
    }
  }
}
</style>